<!--
//
// TableSearchItem.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <template v-for="conf in list" :key="conf.field">
        <template v-if="conf.component === 'el-input'">
            <el-form-item :label="conf.label">
                <el-input v-model="model[conf.field]" @input="onInputChange" :placeholder="conf.placeholder" style="width: 200px" />
            </el-form-item>
        </template>
        <template v-if="conf.component === 'el-input-number'">
            <el-form-item :label="conf.label">
                <el-input-number v-model="model[conf.field]" :placeholder="conf.placeholder" style="width: 200px" controls-position="right"/>
            </el-form-item>
        </template>
        <template v-if="conf.component === 'el-switch'">
            <el-form-item :label="conf.label">
                <el-switch v-model="model[conf.field]" />
            </el-form-item>
        </template>
        <template v-else-if="conf.component === 'el-select'">
            <el-form-item :label="conf.label">
                <el-select v-model="model[conf.field]" :placeholder="conf.placeholder" style="width: 200px" :empty-values="[null, undefined]" :value-on-clear="null">
                    <el-option v-for="item in conf.data" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
        </template>
        <template v-else-if="conf.component === 'el-select-list'">
            <el-form-item :label="conf.label">
                <el-select v-model="model[conf.field]" :placeholder="conf.placeholder" multiple style="width: 200px">
                    <el-option v-for="item in conf.data" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
        </template>
        <template v-else-if="conf.component === 'el-select-bool'">
            <el-form-item :label="conf.label">
                <ElSelectBool v-model="model[conf.field]" :list="conf.data" />
            </el-form-item>
        </template>
        <template v-else-if="conf.component === 'el-select-tree'">
            <el-form-item :label="conf.label">
                <el-tree-select v-model="model[conf.field]" :check-strictly="true" :data="conf.data" :placeholder="conf.placeholder" :props="{label: 'name', children: 'children'}" :render-after-expand="false" style="width: 200px;" value-key="id" />
            </el-form-item>
        </template>
        <template v-else-if="conf.component === 'el-date-picker'">
            <el-form-item :label="conf.label">
                <el-date-picker v-model="model[conf.field]" :format="conf.format || 'YYYY-MM-DD'" :disabled-date="conf.disabledDate" :value-format="conf.valueFormat || 'YYYY-MM-DD'" style="width: 200px" type="date" />
            </el-form-item>
        </template>
        <template v-else-if="conf.component === 'el-date-picker-datetime'">
            <el-form-item :label="conf.label">
                <el-date-picker v-model="model[conf.field]" :format="conf.format || 'YYYY-MM-DD HH:mm:ss'" :disabled-date="conf.disabledDate" :value-format="conf.valueFormat || 'YYYY-MM-DDTHH:mm:ss'" style="width: 200px" type="datetime" />
            </el-form-item>
        </template>
    </template>
</template>

<script>
import ElSelectBool from "./ElSelectBool.vue"

export default {
    name: "TableSearchItem",
    components: {ElSelectBool},
    emits: ['change'],
    props: {
        model: {
            type: Object,
            default: () => {
            }
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        onInputChange (val) {
            // this.$emit('change', val)
        }
    }
}
</script>

<style scoped>

</style>
